<template>
  <div id="Wrap">
    <!-- 表格 -->
    <el-table
      ref="table"
      class="table"
      :data="tableData"
      :border="hasBorder"
      :stripe="true"
      :row-key="rowKey"
      toggle-row-selection
      :row-class-name="tableRowClassName"
      @selection-change="selectionChange"
    >
      <el-table-column v-if="selectionShow" type="selection" width="50" :reserve-selection="true" />
      <!-- 序号 -->
      <el-table-column
        v-if="hasIndex"
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="80"
      />
      <!-- 其他 -->
      <template v-for="item in tableColumnOptions">
        <!-- 插槽列 -->
        <el-table-column
          v-if="item.columnType"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :header-align="item.headerAlign || 'center'"
          :align="item.align || 'center'"
        >
          <template slot-scope="{ row }">
            <slot :name="item.soltName" :data="row" />
          </template>
        </el-table-column>
        <!-- 非插槽列 -->
        <el-table-column
          v-else
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :header-align="item.headerAlign || 'center'"
          :align="item.align || 'center'"
        />
      </template>
    </el-table>
    <!-- 分页器 -->
    <div v-if="paginationShow" class="pagination">
      <el-pagination
        :hide-on-single-page="isShowPagination"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableDataTotal"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'BaseTable',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default () {
        return []
      }
    },
    selectTableData: {
      type: Array,
      default () {
        return []
      }
    },
    // 表格列项
    tableColumnOptions: {
      type: Array,
      require: true,
      default () {
        return []
      }
    },
    // 表格数据总量
    tableDataTotal: {
      type: Number,
      default () {
        return 0
      }
    },
    // 是否具有索引
    hasIndex: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 是否显示边框
    hasBorder: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 是否显示选择框
    selectionShow: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 是否显示选分页器
    paginationShow: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    return {
      // 表格当前页数
      currentPage: 1,
      // 表格每页数量
      pageSize: 10,
      ref: null
    }
  },
  computed: {
    // 计算是否显示分页器
    isShowPagination () {
      const isShow = this.tableDataTotal === 0
      return isShow
    }
  },
  watch: {
    selectTableData (newVal) {
      if (newVal) {
        console.log(newVal)
        this.$nextTick(() => {
          newVal.forEach((item, index) => {
            this.$refs.table.toggleRowSelection(item)
          })
        })
      }
    }
  },
  mounted () {
    this.ref = this.$refs.table
  },
  methods: {
    rowKey(row) {
    // console.log('================:', JSON.stringify(row))
      return row.id
    },
    // 表格变色
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'color-row'
      }
    },
    // 修改当前页
    handleCurrentChange (val) {
      const params = {
        currentPage: val,
        pageSize: this.pageSize
      }
      this.$emit('tableUpdate', params)
    },
    // 修改每页数量
    handleSizeChange (val) {
      const params = {
        currentPage: this.currentPage,
        pageSize: val
      }
      this.$emit('tableUpdate', params)
    },
    // 选择框改变
    selectionChange (e) {
      this.$emit('selectionChange', e)
    }
  }
}
</script>
<style scoped lang="scss">
#Wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
>>> .el-table {
  /* overflow-y:scroll!important; */
}
#Wrap .pagination {
  margin-top: auto;
  margin-left: auto;
}
>>> .cell {
  text-align: center;
}
>>> .cell #link {
  font-family: MicrosoftYaHei;
  color: #445af7;
  cursor: pointer;
}
>>> .cell #delete {
  color: #ff5b5b;
  margin-left: 35px;
  cursor: pointer;
}
>>> .color-row {
  background-color: rgb(243, 243, 243);
}
>>> .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: '';
  position: absolute;
  background-color: transparent !important;
  z-index: 1;
}

::v-deep.el-table th,
.el-table tr {
  color: #fff !important;
  background-color: #2860c3 !important;
}
</style>
